<!-- Dom模板 -->
<template>
   
  <div class="tuichubox">
        <!-- Dom内容 -->
    <div class="meng" @click="close"></div>
    <div class="tuichulist">
      <div class="tuichu">
          
        <div class="tuichu_list">
          <input class="imgGain" type="file" @change="selectImage" />
          <p>从相册选取图片</p>
        </div>
        <div class="tuichu_list">
          <p @click="close()">取消</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import { alert_parent } from "../../components/alert/alert_mixin";
export default {
  mixins: [alert_parent],
  data() {
    return {
      msg: "测试",
      imageItem: "",
    };
  }, // 生命周期 - 创建完成（访问当前this实例）
  created() {}, // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {}, // Vue方法定义
  methods: {
    close() {
        this.$parent.back();
    },
    selectImage(e) {
      if (!e.target.files || !e.target.files[0]) {
        return;
      }
      let reader = new FileReader();
      reader.onload = () => {
        this.imageItem = reader.result;
        let id = sessionStorage.getItem("userId");

        this.$store
          .dispatch("login/eidt", {
            userid: id,
            type: "img",
            img: this.imageItem,
          })
          .then((res) => {
            if (res.code === 200) {
              //  添加用户信息
              this.$store.dispatch("login/getUser", { userid: id });
              this.$parent.back();
            }
          });
      };
      reader.readAsDataURL(e.target.files[0]);
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
/* @import url(); 引入css类 */
/* .meng{
  width: 100vh;
  height: calc(100vh - 2.96rem);
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
} */
.tuichulist {
  width: 100%;
  height: 2.96rem;
  background-color: white;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
  transition: 0.2s all;
}
.tuichu {
  width: 100%;
  height: 4.613333rem;
  background-color: rgba(0, 0, 0, 0.02);
}
.tuichu_list {
  width: 100%;
  height: 1.333333rem;
  line-height: 1.333333rem;
  background-color: white;
  margin-bottom: 0.266667rem;
  box-shadow: 0px 0.053333rem 0.16rem 0rem rgb(0 0 0 / 1%);
  font-size: 0.533333rem;
  font-family: "PingFangSC-bold";
  text-align: center;
  position: relative;
}
.tuichu_list .imgGain {
  position: absolute;
  top: 0.32rem;
  left: 4.026667rem;
  opacity: 0;
}
</style>